<template>
	<div class="unit">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
			<el-form-item class="item" label-width="100px" label="信息系统安全等级保护备案证明:" prop="securityLevel">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.securityLevel" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="密评证明:" prop="confidentialEvaluation">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.confidentialEvaluation" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="培训记录:" prop="trainRecords">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.trainRecords" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="验收报告:" prop="checkReport">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.checkReport" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="初验材料:" prop="fistCheck">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.fistCheck" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="实施计划:" prop="impPlan">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.impPlan" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="技术方案:" prop="techPlan">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.techPlan" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="需求规格说明书:" prop="needManual">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.needManual" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="操作手册:" prop="operateManual">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.operateManual" />
			</el-form-item>
			<el-form-item class="item" label-width="100px" label="应用软件包:" prop="appPackage">
				<TsyUploadFile type="submit" :fileType="fileType" :fileSize="200" v-model="ruleForm.appPackage" />
			</el-form-item>
		</el-form>
		<div class="bott_box">
			<el-button plain class="blue-button" @click="save(ruleFormRef)">提交验收</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import textImg from '/@/views/digitalList/detail/components/component/textImg.vue';
import HyForm from '/@/components/HyForm/index.vue';
import { checkDataSave, checkDataDetail } from '/@/api/Implementation/addImple';
import TsyUploadFile from '/@/components/HyUpload/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { toRefs, defineProps, reactive, ref, onMounted, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
	router.push({
		path: '/appAcceptance/acceptance/index',
	});
};
const props = defineProps({
	message: {
		type: String,
	},
	id: {
		type: String,
	},
});
onMounted(() => {
	// //获取详情，编辑的时候

	nextTick(() => {
		getDataDetail();
	});
});
const fileType = ref(['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']);
//获取应用变更详情
const getDataDetail = () => {
	let ids: any = id?.value;
	if (!ids) {
		return;
	}
	checkDataDetail({ implementationId: ids, reallyId: -123 }).then((res) => {
		if (res.code == 0) {
			if (res.data.implementation.appCheck) {
				ruleForm.value = { ...res.data.implementation.appCheck };
				declareId.value = res.data.implementation.declareId;
			}
		}
		// if (res.code == 0) {
		// 	if (res.data.implementation.appCheck) {
		// 		ruleForm.value = { ...res.data.implementation.appCheck };
		// 	}
		// }
	});
};
const ruleFormRef = ref();
const ruleForm = ref({
	appCode: '',
	securityLevel: [],
	confidentialEvaluation: [],
	trainRecords: [],
	checkReport: [],
	fistCheck: [],
	impPlan: [],
	techPlan: [],
	needManual: [],
	operateManual: [],
	appPackage: [],
});
const rules = reactive({
	securityLevel: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	confidentialEvaluation: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	trainRecords: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	checkReport: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	fistCheck: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	impPlan: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	techPlan: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	needManual: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	operateManual: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
	appPackage: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
});
const hyFormRef = ref();
const sendFileData = () => {
	hyFormRef.value.hyForm;
};
const declareId: any = ref('');
//===================================
//验收
const save = async (formEl: any) => {
	if (!formEl) return;
	let appCode = message;
	let ids = id;
	let data: any = ruleForm.value;
	data.appCode = appCode;
	data.implementationId = ids;
	data.declareId = declareId.value;
	await formEl.validate((valid: any, fields: any) => {
		if (valid) {
			ElMessageBox.confirm('是否确认提交验收？', '操作确认', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
				showClose: false,
			})
				.then(() => {
					checkDataSave(data).then((res) => {
						if (res.code == 0) {
							handleBack();
						}
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '取消',
					});
				});
		} else {
			console.log('error submit!', fields);
		}
	});
};

const { message, id } = toRefs(props);
</script>

<style lang="scss" scoped>
.unit {
	padding-bottom: 20px;
	.demo-ruleForm {
		display: flex;
		flex-wrap: wrap;
		.item {
			width: 45%;
			margin-bottom: 20px;
			margin-right: 5px;
		}
	}
	:deep(.el-form-item__content) {
		align-items: flex-start;
	}

	.bott_box {
		position: absolute;
		left: 0px;
		bottom: 0px;
		margin-top: 10px;
		width: 100%;
		padding: 10px 0;
		text-align: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		flex-grow: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
